import { ExclamationCircleFilled } from '@ant-design/icons';
import { Layout, Menu, Modal } from 'antd';
import { useNavigate,useLocation } from "react-router-dom"
const { confirm } = Modal;
import React from 'react';
const { Header } = Layout;
// const items1 = ['1', '2', '3'].map((key) => ({
//     key,
//     label: `nav ${key}`,
// }));
const nav = [
  {
    key: '/nav/mine',
    label: '个人中心'
  },
  {
    key: 'toLogin',
    label: '退出登录'
  }
]



export default function Myheader() {
  let Location=useLocation()
  if (localStorage.userInfo) {
    const userInfo = JSON.parse(localStorage.userInfo)
    const Navigate = useNavigate()
    function sureBack(val) {
      console.log(val);
      if (val.key == 'toLogin') {
        confirm({
          title: '确定退出？',
          icon: <ExclamationCircleFilled />,
         
          onOk() {

            return new Promise((resolve, reject) => {
              resolve()
            }).then(() => {
              localStorage.clear()
              Navigate('/login', { replace: true })
            }).catch(() => console.log('Oops errors!'));

          },
          onCancel() {},
        });
      }else{
        Navigate('/nav/mine')
      }

    }
    return (
      <Header className="header" style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ color: '#fff', fontSize: 30, fontStyle: 'italic', display: 'flex', alignItems: 'center' }}>蜗牛商城
          <span style={{ fontSize: 16, marginLeft: 10 }}>欢迎您</span>
          <span style={{ fontSize: 14, color: 'orange', marginLeft: 10 }}>{userInfo.account}</span>
          <img style={{ width: 50, height: 50, marginLeft: 10 }} src={`http://jacklv.cn/images/${userInfo.imgUrl}`} alt="" />
        </div>
        <Menu onClick={sureBack} style={{ width: 200 }} theme="dark" mode="horizontal" selectedKeys={[Location.pathname]} items={nav} />
      </Header>
    )
  }


}
